<template lang="pug">
  -var list = {'home':'首页','order':'订单','message':'消息','self':'我的'}
  footer.footer-wrap
    nav.nav
      each val, key in list
        router-link(to='/index/' + key,exact)= val
          svg.icon(aria-hidden="true")
            use(xlink:href='#icon-'+key)
</template>

<script type="es6">
  export default {
    name: 'app-footer',
    data(){
      return {}
    },
    components: {},
    methods: {}
  }
</script>

<style lang="stylus" scoped>

  .router-link-active
    color black

  footer
    position fixed
    bottom 0
    width 100%
    background #fff
    height 2rem
    z-index 999
    width 100%
    nav
      display flex
      height 2rem
      width 100%
      a
        flex 1
        background #fff
        text-align center
        font-size .5rem
        text-decoration none
        color black
        line-height 3rem
        .icon
          display block
          margin 0 auto
          margin-top -2.85rem
          font-size 1rem
</style>
